import React from 'react';
import { ProductGroupC, PrimaryC, FirstHeaderC, SecondHeaderC } from '../../../comps';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';

class ProductGroupCDemo extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      init12: undefined,
      init22: undefined,
      loading: true,
    };

    setTimeout(() => {
      this.setState({
        init12: '75',
        init22: ['75', '62'],
        loading: false,
      });
    }, 3000);
  }

  onClick13 = () => {
    this.state.ProductGroupC1.setSelect('62');
  };

  onClick23 = () => {
    this.state.ProductGroupC2.setSelect(['75', '62']);
  };

  render() {
    return (
      <div style={{ padding: '20px', width: '800px' }}>
        <FirstHeaderC title='单选' />

        <SecondHeaderC title='无初始化' />
        <ProductGroupC form={this.props.form} dataIndex='group11' rules={[{ required: true, message: '请选择产品组!' }]} helper='lalal' onChange={(e) => console.log(e)} />

        <SecondHeaderC title='异步初始化' />
        <ProductGroupC form={this.props.form} dataIndex='group12' initialValue={this.state.init12} onChange={(e) => console.log(e)} />

        <SecondHeaderC title='非初始化更改选项' />
        <ProductGroupC form={this.props.form} dataIndex='group13' onChange={(e) => console.log(e)} onRef={(ref) => this.setState({ ProductGroupC1: ref })} />
        <PrimaryC onClick={this.onClick13} title='更换选项' />

        <div style={{ height: '20px' }}></div>
        <FirstHeaderC title='多选' />
        <SecondHeaderC title='无初始化' />
        <ProductGroupC form={this.props.form} dataIndex='group2' rules={[{ required: true, message: '请选择产品组!' }]} multiple={true} onChange={(e) => console.log(e)} />

        <SecondHeaderC title='异步初始化' />
        <ProductGroupC form={this.props.form} dataIndex='group22' initialValue={this.state.init22} multiple={true} onChange={(e) => console.log(e)} />

        <SecondHeaderC title='非初始化更改选项' />
        <ProductGroupC form={this.props.form} dataIndex='group23' onChange={(e) => console.log(e)} multiple={true} onRef={(ref) => this.setState({ ProductGroupC2: ref })} />
        <PrimaryC onClick={this.onClick23} title='更换选项' />
      </div>
    );
  }
}

export default Form.create()(ProductGroupCDemo);
